<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>选择团队</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<style type="text/css">
			body {
				background-color: #f3f3f5;
				font-size: 0.3rem;
			}
			.id_container {
				padding: 0.2rem;
			}
			.id_container p {
				margin-top: 0.2rem;
				text-align: center;
			}
			.oc_item {
				background: white;
				/* width: 100%; */
				border-radius: 8px;
				box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.03);
				margin-top: 0.3rem;
				padding: 0.35rem 0.3rem;
				align-items: center;
			}
			.oc_item_left {
				align-items: center;
			}
			.oc_item_left img {
				width: 0.5rem;
				height: 0.5rem;
				margin-right: 0.2rem;
			}
			.oc_item_arrow {
				width: 0.3rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<p class="fontsize-title_wc">请选择进入团队</p>
				<div
					class="oc_item flex flex-pack-justify"
					v-for="item in teamList"
					@click="linkToStudio(item.dataId)"
				>
					<div class="flex oc_item_left">
						<img src="img/team.png" alt="" />
						<span>{{item.name}}</span>
					</div>
					<img class="oc_item_arrow" src="img/ze-arrow.png" alt="" />
				</div>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		const PatientData = {
			data() {
				return {
					doctorId: '',
					teamList: [],
				}
			},
			computed: {},
			created() {
				this.doctorId = localStorage.getItem('did')
				this.getActions()
			},
			methods: {
				getActions() {
					getAction(spliceUrl('/100/12/1001212'), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						console.log('teamList', res)
						if (res.success) {
							this.teamList = res.result.list
						}
					})
				},
				linkToStudio(id) {
					postAction(spliceUrl('/100/12/1001213'), {
						doctorId: this.doctorId,
						teamId: id,
					}).then(res => {
						res = res.data
						console.log('team', res)
						if (res.success) {
							window.location.href = './doctorStudio.html'
						}
					})
				},
			},
			components: {},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
